<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:insert="~{include :: header('新增资讯信息')}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <style>
        #showImage {
            width: 200px;
            height: 117px;
            border: 1px solid #C9C9C9;
        }
    </style>
</head>
<body class="hold-transition">
<!-- Site wrapper -->
<div class="container-fluid mt-2 mb-2">
    <!-- Main content -->
    <div class="card mt-2">
        <div class="card-header border-0">
            <h3 class="card-title">添加资讯</h3>
            <div class="card-tools"></div>
        </div>
        <form class="form-horizontal" id="form-article-edit" th:object="${article}">
            <input type="hidden" name="articleId" th:value="*{articleId}" required>
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">标题</label>
                    <div class="col-sm-6">
                        <input name="title" class="form-control" type="text" th:value="*{title}" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">简介</label>
                    <div class="col-sm-6">
                        <textarea style="height: 100px" name="intro" class="form-control" th:value="*{intro}" required></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">封面图片</label>
                    <div class="col-sm-4">
                        <input id="cover" name="cover" th:value="*{cover}" class="form-control" placeholder="请上传宽高为: 500*332 的图片！" type="text" required>
                    </div>
                    <div class="col-sm-2">
                        <label for="avatar" class="btn btn-danger"><i class="fa fa-image"></i> 上传图像</label>
                        <input type="file" onchange="ImgUpdate()" style="display: none" value="" name="avatar" id="avatar" accept="image/*"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">封面预览</label>
                    <div class="col-sm-4">
                        <img id="showImage" src='/static/logo-big.png'/>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">内容</label>
                    <div class="col-sm-8">
                        <input id="noticeContent" name="content" th:value="*{content}" type="hidden">
                        <div id="editor" class="summernote"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2"></label>
                    <div class="col-sm-8">
                        <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
                        <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: summernote-js}" />
<script type="text/javascript">
    var prefix = "/article"

    function submitHandler() {
        var sHTML = $('.summernote').summernote('code');
        $("#noticeContent").val(sHTML);
        $.operate.save(prefix + "/save.json", $('#form-article-edit').serialize(), function (json) {
            if (json.code === 0) {
                layer.alert("恭喜您，保存成功！", function () {
                    parent.adminlte.IFrame.prototype.removeActiveTab('active');
                });
            } else {
                layer.alert("保存失败：" + json.msg);
            }
        });
    }

    function ImgUpdate() {
        var file = $('#avatar')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (result) {
                console.log(result)

                if (result.code === 0) {
                    $("#cover").val(result.data);
                    $("#showImage").attr("src", result.data);
                    window.layer.msg('上传成功', {icon: 1});
                } else {
                    window.layer.msg('上传失败:' + result.msg, {icon: 2});
                }

            }
        })

    }


    $(function() {
        $('.summernote').summernote({
            placeholder: '请输入公告内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        var content = $("#noticeContent").val();
        $('#editor').summernote('code', content);
    });

    // 上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }
</script>
</body>
</html>